<template>
  <div class="price-page">
    
    <NavBar />
    <header class="header">
      <h1>价格</h1>
    </header>
    <div class="pricing-container">


      <div class="pricing-card premium">
        <h2>基础版</h2>
        <ul class="features">
          <li>✔ 应用统计</li>
          <li>✔ 不限安装量</li>
          <li>✔ 传递App拉起参数</li>
          <li>✔ 参数监控</li>
          <li>✔ App数据分享</li>
          <li>✔ 传递App拉起参数</li>
          <li>✔ 智能引导App安装或拉起</li>
        </ul>
      </div>

      <div class="pricing-card consultation">
        <h2>私域部署</h2>
        <p class="description">咨询</p>
        <ul class="features">
          <li>✔ 高级版全部功能</li>
          <li>✔ 量身定制</li>
          <li>✔ 独立部署的服务器</li>
          <li>✔ 可部署到国内/海外</li>
          <li>✔ 深度资源共享</li>
          <li>✔ 数据独立、安全私有</li>
          <li>✔ 数据监控与分析</li>
          <li>✔ 咨询响应快速</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from '@/components/NavBar.vue';

export default {
  components: {
    NavBar
  }
};
</script>

<style scoped>
.price-page {
  background-color: #1e1e1e;
  color: #ffffff;
  min-height: 100vh;
}

.header {
  text-align: center;
  margin-bottom: 2rem;
}

.pricing-container {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 2rem;
}

.pricing-card {
  background-color: #2a2a2a;
  border-radius: 8px;
  padding: 2rem;
  width: 300px;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.pricing-card h2 {
  margin-bottom: 1rem;
}

.price {
  font-size: 1.5rem;
  font-weight: bold;
  margin: 1rem 0;
}

.features {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
}

.features li {
  margin: 0.5rem 0;
}

.footer {
  text-align: center;
  margin-top: 2rem;
  font-size: 0.9rem;
}
</style> 